<template>
    <div class="classify full">
        <div class="classify-left">
            <div class="classify-left-item" @click="select(i.id)" v-for="i in nav" :key="i.id" :class="[i.id === active && 'classify-left-item-active']">
                {{i.name}}
            </div>
            <div class="bottom-space"></div>
        </div>
        <div class="classify-right">
            <div class="store-item" v-for="i in store" :key="i.id" @click="navDetail">
                <div class="store-item-img">
                    <img src="../../assets/img/9.png" alt=""/>
                </div>
                <div class="store-item-info">
                    <div class="store-item-info-name">{{i.name}}</div>
                    <div class="store-item-info-position">
                        <div>{{i.position}}</div>
                    </div>
                </div>
                <div class="store-item-distance">{{i.distance}}</div>
            </div>
            <div class="bottom-space"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'classify',
        data () {
            return {
                active: 0,
                store: [
                    {
                        id: 0,
                        name: '汉堡王(新世纪环球中心店)',
                        position: '天府大道北段1700号新世纪环球中心B1层',
                        distance: '554m'
                    },
                    {
                        id: 1,
                        name: '汉堡王(新世纪环球中心店)',
                        position: '天府大道北段1700号新世纪环球中心B1层',
                        distance: '554m'
                    },
                    {
                        id: 2,
                        name: '汉堡王(新世纪环球中心店)',
                        position: '天府大道北段1700号新世纪环球中心B1层',
                        distance: '554m'
                    },
                    {
                        id: 3,
                        name: '汉堡王(新世纪环球中心店)',
                        position: '天府大道北段1700号新世纪环球中心B1层',
                        distance: '554m'
                    }
                ],
                nav: [
                    {
                        id: 0,
                        name: '全部'
                    },
                    {
                        id: 1,
                        name: '重庆火锅'
                    },
                    {
                        id: 2,
                        name: '汉堡披萨'
                    },
                    {
                        id: 3,
                        name: '咖啡奶茶'
                    },
                    {
                        id: 4,
                        name: '砂锅串串'
                    },
                    {
                        id: 5,
                        name: '烧烤烤肉'
                    },
                    {
                        id: 6,
                        name: '麻辣烤鱼'
                    },
                    {
                        id: 7,
                        name: '街头牛排'
                    },
                    {
                        id: 8,
                        name: '重庆小面'
                    }
                ]
            }
        },
        methods: {
            navDetail () {
                this.$router.push('StoreDetail')
            },
            select (i) {
               this.active = i;
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
    .classify {
        display: flex;

        .bottom-space {
            height: 1.4rem;
        }

        &-left {
            width: 1.8rem;
            height: 100%;
            overflow-y: auto;
            background-color: #F5F5F5;

            &-item {
                transition: all 0.3s;
                line-height: 0.9rem;
                text-align: center;
                font-size: 0.26rem;
                font-weight: 500;
                color: rgba(45, 45, 45, 1);
            }

            &-item-active {
                background-color: #ffffff;
                font-size: 0.3rem;
                font-weight: bold;
                color: rgba(45, 45, 45, 1);
                position: relative;

                &:before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0.3rem;
                    width: 0.08rem;
                    height: 0.3rem;
                    background: rgba(255, 150, 38, 1);
                }
            }

        }

        &-right {
            flex: 1;
            background-color: #FDFCFB;
            padding: 0.2rem 0.2rem 1rem 0.2rem;
            height: 100%;
            overflow-y: auto;

            .store-item {
                margin-bottom: 0.1rem;
                background-color: #ffffff;
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 5.26rem;
                padding: 0.2rem;

                &-img {
                    width: 1.4rem;
                    height: 1.4rem;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                &-info {
                    width: 2.28rem;

                    &-name {
                        font-size: 0.26rem;
                        font-weight: bold;
                        color: rgba(3, 3, 3, 1);
                    }

                    &-position {
                        display: flex;
                        align-items: flex-start;
                        margin-top: 0.12rem;

                        > div {
                            font-size: 0.22rem;
                            font-weight: 500;
                            color: rgba(102, 102, 102, 1);
                        }
                    }
                }

                &-distance {
                    width: 0.8rem;
                    font-size: 0.24rem;
                    font-weight: 500;
                    color: rgba(102, 102, 102, 1);
                }
            }
        }
    }
</style>
